<template>
<div>
  <p>电影名称：<input type="text" placeholder="请输入电影名字" v-model='from.name'></p>
  <p>电影图片：<input type="file" id="pic" name="pic"></p>
  <p>添加时间：<input type="text" v-model="from.create_time"></p>
  <button @click="add">上传</button>
  <br>
  <br>
  <table border="1" align="center" width="500">
    <tr >
      <td>电影名称</td>
      <td>上传时间</td>
      <td>图片展示</td>
    </tr>
    <tr v-for="i in movie">
      <td>{{i.name}}</td>
      <td>{{i.create_time}}</td>
      <td><img :src="'http://localhost:8000'+i.pic" width="100"></td>
    </tr>
  </table>
</div>
</template>

<script>
export default {
  name: "movie",
  data(){
    return{
      from:{},
      movie:[]
    }
  },
  methods:{
    add(){
      let formdate = new FormData()
      let pic = document.getElementById('pic').files[0]
      formdate.append('name',this.from.name)
      formdate.append('pic',pic)
      formdate.append('create_time',this.from.create_time)
      this.$axios.post('users/movie/',formdate)
      .then(res=>{
        if(res.data.code==200){
          alert('添加成功')
        }else {
          alert('添加失败')
        }
      })
    },
    get_movie(){
      this.$axios.get('users/movie/')
      .then(res=>{
        if(res.data.code==200){
          this.movie = res.data.list
        }
      })
    }
  },
  mounted() {
    this.get_movie()
  }
}

</script>

<style scoped>

</style>
